<style>

    .ly-number-info {
        display: inline-block;
        margin-left: 20px;
        /*background: indianred;*/
    }

    .ly-number-info .ly-number-current-title {
        margin-bottom: 15px;
        font-size: 14px;
        line-height: 20px;
        color: #667586;
    }

    .ly-number-info .ly-number-current {
        margin-bottom: 15px;
        font-weight: bold;
        font-size: 24px;
        line-height: 34px;
        color: #111;
    }

    .ly-number-info .ly-number-current .ly-number {
        font-size: 24px;
    }

    .ly-number-info .ly-number-history {
        font-size: 12px;
        line-height: 20px;
        color: #475669;
        margin-bottom: 20px;
    }

    .ly-number-info .ly-number-history .ly-number {
        font-size: 12px;
    }
    .ly-number-info .ly-number-current-title .el-icon-question{
        margin-left: 6px;
        font-size: 10px;
        color: #9DA9B6;
        cursor: pointer;
    }
</style>
<template>
    <div class="ly-number-info">
        <div class="ly-number-current-title">{{title}} <el-popover v-if="tip" width="320" popper-class="ly-header-pop" placement="top" v-model="helpPop">
            {{tip}}
            <i  slot="reference"  style="" class="el-icon-question"></i>
        </el-popover>
        </div>
        <div class="ly-number-current">
            <ly-number v-model="current"
                       :up="this.current>=this.history" :trend="trend"
                       :prefix="prefix" :auto="auto"></ly-number>
        </div>
        <div v-if="historyTitle" class="ly-number-history">{{historyTitle}}：
            <ly-number v-model="history"
                       :trend="false"
                       :prefix="prefix"></ly-number>
        </div>
    </div>
</template>
<script>
    Rap.define('', '', function () {
        return {
            name: 'ly-number-info',
            props: {
                title: {
                    default: ''
                },
                'historyTitle': {
                    default: ''
                },
                current: {
                    default: 0
                },
                history: {
                    default: 0
                },
                tip: {
                    default: ''
                },
                trend: {
                    default: true
                },
                prefix: {
                    default: ''
                },
                auto: {
                    default: false
                }
            }
        }
    });
</script>


